<div class="content-warp" style="height:700px;">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
    <span class="content-title">编辑自定义模板</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form [formGroup]="validateForm">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>自定义模板名称：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('template_name')">
            <div class="p-pr" style="width:600px;">
            					            	<nz-input
                                      formControlName="template_name"
                                      placeholder="请输入自定义模板名称"
                                      class="ant-input ng-pristine ng-valid ng-touched"
                                      style="width:600px;" maxlength="30"></nz-input>
              <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                {{30-(validateForm.controls.template_name.value?validateForm.controls.template_name.value.length:0) }}
              </div>
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('template_name').dirty&&getFormControl('template_name').hasError('required')">
              请输入自定义模板名称
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('template_name').dirty&&getFormControl('template_name').hasError('maxlength')">
              自定义模板名称不能超过30个字
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>模板图片：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <div>
              <app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo"
                          (piclistChange)="fileChange(true)"
                          (fileListChange)="fileChange(true)"></app-upload>
            </div>
            <div nz-form-explain *ngIf="picError">请至少上传一张图片</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>是否启用：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <div>
              <nz-switch  formControlName="default"></nz-switch>
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>自定义模板备注：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('introduce')">
            <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="introduce"
                                      placeholder="请输入自定义模板备注"
                                      class="ant-input ng-pristine ng-valid ng-touched"
                                      rows="2"
                                      style="width:300px;" maxlength="30"></textarea>
              <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                {{30-(validateForm.controls.introduce.value?validateForm.controls.introduce.value.length:0) }}
              </div>
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('introduce').dirty&&getFormControl('introduce').hasError('required')">
              请输入自定义模板备注
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('introduce').dirty&&getFormControl('introduce').hasError('maxlength')">
              自定义模板备注不能超过30个字
            </div>
          </div>
        </div>
        <div nz-form-item nz-row style="margin-bottom:8px;">
          <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="7">
            <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="submitStatus"
                    (click)="_submitForm()">确 认
            </button>
            <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()"
                    style="margin-left: 20px">取 消
            </button>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>
